<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<style type="text/css">
		.case{
			width: 300px;
			margin: 0 auto;
			border:1px solid #000;
			padding: 15px;
		}
		span{
			display: inline-block;
			width: 30px;
			height: 30px;
			margin: 12px;
			border:1px solid #000;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
		}
		.sum{
			font-size: 20px;
			line-height: 30px;
			margin: 0 10px;
			margin-top: 10px;
		}
		#count{
			width: 255px;
			height: 30px;
			padding: 0 5px;
			margin-left: 5px;
			font-size: 20px;
		}
		#price{
			width: 205px;
			height: 30px;
			padding: 0 5px;
			margin-left: 5px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="case">
		<div class="sum">
			<input type="" name="" id="count" value="">
		</div>
		<div class="sum">
			SUM:<input type="" name="" id="price" readonly="" value="0">
		</div>
		<div>
			<span class="numb" value="1">1</span>
			<span class="numb" value="2">2</span> 
			<span class="numb" value="3">3</span>
			<span class="numb" value="<-"><-</span>
			<span class="numb" value="C" id="clear">C</span>
		</div>
		<div>
			<span class="numb" value="4">4</span>
			<span class="numb" value="5">5</span>
			<span class="numb" value="6">6</span>
			<span class="numb" value="*">*</span>
			<span class="numb" value="/">/</span>
		</div>
		<div>
			<span class="numb" value="7">7</span>
			<span class="numb" value="8">8</span>
			<span class="numb" value="9">9</span>
			<span class="numb" value="+" id="add">+</span>
			<span class="numb" value="-">-</span>
		</div>
		<div>
			<span class="numb" value="0">0</span>
			<span class="numb" value="00">00</span>
			<span class="numb" value=".">.</span>
			<span class="numb" value="%">%</span>
			<span class="numb"  id="equal">=</span>
		</div>
	</div>
	<script type="text/javascript">
		var span = document.getElementsByClassName("numb");
		var count = document.getElementById("count");
		var sum = document.getElementById("price");
		var add = document.getElementById("add");
			for(var i = 0;i < span.length; i++){
				span[i].onclick = function(){
					count.value = count.value + this.innerHTML;
					var t = count.value.indexOf("+");
					if(count.value.charAt(t) == "+"){
						var m = count.value.split("+");
						equal.value = Number(m[0])+Number(m[1]);
					}
					var t = count.value.indexOf("-");
					if(count.value.charAt(t) == "-"){
						var m = count.value.split("-");
						equal.value = Number(m[0])-Number(m[1]);
					}
					var t = count.value.indexOf("*");
					if(count.value.charAt(t) == "*"){
						var m = count.value.split("*");
						equal.value = Number(m[0])*Number(m[1]);
					}
					var t = count.value.indexOf("/");
					if(count.value.charAt(t) == "/"){
						var m = count.value.split("/");
						equal.value = Number(m[0])/Number(m[1]);
					}
					var t = count.value.indexOf("%");
					if(count.value.charAt(t) == "%"){
						var m = count.value.split("%");
						equal.value = Number(m[0])%Number(m[1]);
					}
				}
			}
			//给等号绑定事件
			var equal = document.getElementById('equal')
				equal.onclick =function(){
					sum.value = equal.value;
				}	
			//给C绑定单击事件
			var clear = document.getElementById('clear')
				clear.onclick = function(){
					count.value = "";
					sum.value = "0";
				}
	</script>
</body>
</html>